<template>
  <VueContextmenu ref="contextmenu" class="context-menu">
    <li
      v-for="(item, index) in menuType"
      :key="index"
      :class="[item.disabled ? 'context-menu-disabled' : '']"
      @click.prevent.stop="handlClick(item)"
      @contextmenu.prevent.stop
    >
      {{ item.text }}
    </li>
  </VueContextmenu>
</template>

<script>
import VueContextmenu from "vue-context-menu";

/**
 * 组件：<contextmenu ref="contextmenu" :menu-type="menuType" @handleStopNext @handleStop @handleStopNex @handleStart @handleEdit @handleGoFirst @handleGoEnd @handleGoPrev @handleGoNext @handleDelete />
 *
 * 右键事件触发函数内调用：this.$refs.contextmenu.$children[0].open();
 */

export default {
  name: "Contextmenu",
  components: {
    VueContextmenu
  },
  props: {
    menuType: {
      type: Array,
      default() {
        return [
          {
            text: "复制",
            disabled: false
          },
          {
            text: "粘贴",
            disabled: true
          }
        ];
      }
    }
  },
  data() {
    return {};
  },
  mounted() {
    document.addEventListener("click", this.handlHide);
    console.log(this.$refs.contextmenu);
  },
  beforeDestroy() {
    document.removeEventListener("click", this.handlHide);
  },
  methods: {
    handlClick(item) {
      if (item.disabled) {
        this.$refs.contextmenu.ctxVisible = true;
      } else {
        this.$refs.contextmenu.ctxVisible = false;
        if (item.text === "下机") {
          this.$emit("handleStop");
        } else if (item.text === "下机并执行下一任务") {
          this.$emit("handleStopNext");
        } else if (item.text === "上机") {
          this.$emit("handleStart");
        } else if (item.text === "修改") {
          this.$emit("handleEdit");
        } else if (item.text === "提至最前") {
          this.$emit("handleGoFirst");
        } else if (item.text === "提至最后") {
          this.$emit("handleGoEnd");
        } else if (item.text === "前移一位") {
          this.$emit("handleGoPrev");
        } else if (item.text === "后移一位") {
          this.$emit("handleGoNext");
        } else if (item.text === "删除") {
          this.$emit("handleDelete");
        }
      }
    },
    handlHide() {
      this.$refs.contextmenu.ctxVisible = false;
    }
  }
};
</script>

<style lang="scss">
.context-menu {
  border: 1px solid #e4e7ed;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.06);
  font-size: 14px;

  .ctx-menu {
    box-sizing: border-box;
    position: static;
    border: none;
    box-shadow: none;
    color: #606266;
    min-width: 0;
    margin: 0;
    border-radius: 0;

    li {
      padding: 5px 20px;
      text-align: left;
      cursor: pointer;

      &.context-menu-disabled {
        color: #c0c4cc;

        &:hover {
          cursor: no-drop;
          background-color: #ffffff;
          color: #c0c4cc;
        }
      }

      &:hover {
        background-color: #409eff;
        color: #fff;
      }
    }
  }
}
</style>
